<template>
  <el-form ref="form" :model="form" :inline="true" class="agent-search" label-position="top">
    <el-form-item :label="$t('public.queues')" class="form-item">
      <el-select size="mini" v-model="form.queue" collapse-tags :placeholder="$t('public.pleasePick')" @change="queueSearch" filterable :multiple="true" class="width-full">
        <el-option
          v-for="(item, index) in allQueue"
          :label="item.DisplayName"
          v-if="type==='chat'||(type==='call' && item.PBX === $store.state.session.user.pbx)"
          :key="index"
          :value="item._id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('public.agent')" class="form-item">
      <el-select size="mini" v-model="form.agent" collapse-tags :placeholder="$t('public.pleasePick')" @change="monitorSearch" filterable :multiple="true" class="width-full">
        <el-option
          v-for="(item, index) in selectAgents"
          :label="item.displayName + '['+ item.exten + ']'"
          :key="index"
          :value="item._id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="this.type === 'chat' ? $t('monitor.busyType'): $t('monitor.agentState')" class="form-item">
      <el-select size="mini" v-model="form.state" collapse-tags @change="monitorSearch" :placeholder="$t('public.pleasePick')" filterable :multiple="true" class="width-full">
        <el-option
          v-for="(item,index) in allState"
          :label="item.value"
          :key="index"
          value-key="_id"
          :value="item.key">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label=" " class="form-item">
      <el-checkbox v-model="form.includeSubordinate" @change="monitorSearch">{{$t('public.includeSubordinate')}}</el-checkbox>
    </el-form-item>
    <el-form-item label="领取状态" v-if="type === 'chat'" class="form-item">
      <el-select size="mini" v-model="form.getState" collapse-tags @change="monitorSearch" :placeholder="$t('public.pleasePick')" filterable :multiple="true" class="width-full">
        <el-option
          v-for="(item,index) in allGet"
          :label="item.value"
          :key="index"
          value-key="_id"
          :value="item.key">
        </el-option>
      </el-select>
    </el-form-item>
    <!--<el-row :gutter="20">-->
      <!--<el-col :span="5">-->

      <!--</el-col>-->
      <!--<el-col :span="5">-->
      <!--</el-col>-->
      <!--<el-col :span="5">-->
      <!--</el-col>-->
      <!--<el-col :span="4">-->
      <!--</el-col>-->
    <!--</el-row>-->
    <!--<el-row>-->
      <!--<el-col :span="5">-->

      <!--</el-col>-->
    <!--</el-row>-->
  </el-form>
</template>
<script>
  import {getCacheByKey, deepClone} from '@/utils/m7Utils.js'
  export default {
    name: 'search',
    data () {
      return {
        form: {
          queue: [],
          agent: [],
          state: [],
          includeSubordinate: false,
          getState: []
        },
        selectAgents: [],
        allQueue: [],
        allAgent: [],
        scope: ''
      }
    },
    props: {
      allState: {type: Array, default: function () { return [] }},
      allGet: {type: Array, default: function () { return [] }}, // 在线咨询领取开关情况
      type: {type: String, default: ''}
    },
    methods: {
      scopeAgents (type) {
        let session = this.$store.state.session
        if (session.user.type !== 'admin' && session.user.scope[type] !== 'all') {
          let lowUsers = session.user.moduleUsers[type] || []
          return lowUsers
        } else {
          return 'noScope'
        }
      },
      // 技能组change函数
      queueSearch (value) {
        let data = this.form.queue
        let arrayList = []
        this.form.agent = []
        this.selectAgents = []
        if (data.length !== 0) {
          // 所有的AssignMembers去重，写入arrayList
          data.map((item) => {
            let peer = getCacheByKey(this.type === 'call' ? 'queues' : 'mailQueues', '_id', item)
            let AssignMembers = peer.AssignMembers || []
            for (let i = 0; i < AssignMembers.length; i++) {
              let one = AssignMembers[i]
              if (this.scope !== 'noScope' && this.scope.indexOf(one.agentID) === -1) {
                continue
              }
              if (arrayList.indexOf(one.agentID) === -1) {
                arrayList.push(one.agentID)
              }
            }
          })
          arrayList.forEach((item2) => {
            let all = this.$agentsMap() || {}
            let agent = all[item2] || ''
            if (agent) {
              this.selectAgents.push({ displayName: agent.displayName, exten: agent.exten, _id: agent._id, parentId: agent.parentId })
            }
          })
        } else {
          this.selectAgents = this.allAgent
        }
        this.monitorSearch()
      },
      // 坐席change函数
      change (selectAgent) {
        var agents = []
        let agentList = this.allAgent
        if (selectAgent.length === 0) {
          this.selectAgents.forEach(function (item) {
            agents.push(item._id)
          })
        } else {
          agents = deepClone(selectAgent)
        }
        if (this.form.includeSubordinate) {
          // 我和我的下属
          let getAgent = function (pid) {
            for (var i = 0; i < agentList.length; i++) {
              var obj = agentList[i]
              if (obj.parentId && obj.parentId === pid && agents.indexOf(obj._id) === -1) {
                agents.push(obj._id)
                getAgent(obj._id)
              }
            }
          }
          agents.map((item) => {
            getAgent(item)
          })
        }
        return agents
      },
      monitorSearch () {
        let agents = this.change(this.form.agent)
        this.$emit('search', {agents, state: this.form.state, getState: this.form.getState})
      }
    },
    beforeMount () {
      let action = 'queues'
      if (this.type === 'chat') {
        action = 'mailQueues'
      }
      let p1 = this.$store.dispatch('getCache', {type: action})
      let p2 = this.$store.dispatch('getCache', {type: 'agents'})
      Promise.all([p1, p2]).then(([res1, res2]) => {
        this.allQueue = res1
        this.scope = this.scopeAgents(this.type)
        if (this.scope !== 'noScope') {
          this.allAgent = (res2 || []).filter((item) => item.status === 'enable' && this.scope.indexOf(item._id) !== -1)
        } else {
          this.allAgent = (res2 || []).filter((item) => item.status === 'enable')
        }
        if (this.type === 'call') {
          let pbx = this.$store.state.session.user.pbx
          this.allAgent = this.allAgent.filter((item) => {
            return item.pbx === pbx
          })
        }
        this.selectAgents = this.allAgent
        this.monitorSearch()
      })
    }
  }
</script>
<style lang="stylus" scoped>
  .form-item
    padding-right 20px
  .width-full
    width 220px
  .agent-search
    .el-select
      .el-select__tags-text
        display inline-block
        max-width 110px
        text-overflow ellipsis
        overflow hidden
        white-space  nowrap
      .el-tag__close.el-icon-close
        top -3px
</style>
